        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="vue.js"></script>
            <script src="index.js"></script>
            <link rel="stylesheet" href="index.css">
        </head>


        </head>
        <body>
        <div id="app">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <script>
            const vu = new Vue({
                el: '#app',

                data() {
                    return {

                        ruleForm: {
                            pass: "",
                            checkPass: "",
                            age: ""
                        },
                        rules: {

                            pass: [
                                {required: true, message: "请输入密码", trigger: "blur"},
                                {min: 5, max: 8, message: "密码长度5-8个字符", trigger: "blur"}
                            ],
                            checkPass: [
                                {required: true, message: "请输入密码", trigger: "blur"},
                                {min: 5, max: 8, message: "密码长度5-8个字符", trigger: "blur"}
                            ],
                            age: [
                                {required: true, message: "请输入年纪", trigger: "blur"},
                                //  可以添加正则表达式  1-100整数校验
                                {pattern: /(^[1-9][0-9]$)|(^100&)|(^[1-9]$)$/, message: "年纪范围1-100岁", trigger: "blur"}

                            ]

                        }
                    }
                },
                methods:{
                    submitForm:function(formName){

                        this.$refs[formName].validate((valid)=>{
                            if(valid){
                                alert("submit")
                            }else{
                                alert("表单检验失败")
                            }
                        })
                    }
                }


            })

        </script>

        </body>
        </html>